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kungeekUl 


kungeekUl 是 一 套 集 合 了 多 个 js 组 件 的 前 端 组 件 库 。 


在 线 阅 读 文档 : 在 线 阅 读 


使 用 指南 
下 载 文 件 
文件 源码 地 址 : 源码 地 址 


引入 文件 


<!-- kungeekui.css --> 
<link rel="stylesheet" type="text/css" href="/skin/css/common/ku 
ngeekui.css"> 


<!-- kungeekui.js --> 
<script src="/skin/script/kungeekui.js"></script> 


* 依 赖 关系 


。 kungeekui 基于 Bootstrap 与 jQuery ， 使 用 前 先 确 保 页 面 引用 
了 Bootstrap 与 jQuery 

e dateSelect 基 于 momentjs ， 使 用 dateSelect 之 前 请 引入 momentjs 

e treeSelect 基 于 ztree ， 使 用 treeSelect 之 前 请 引入 ztree 


Datagrid 数据 表格 


Datagrid 数据 表格 用 于 将 后 台数 据 通过 异步 加 载 到 页 面 进行 显示 ， 并 提供 丰富 的 配 
置 和 方法 ， 应 对 各 种 各 样 的 表格 的 显示 和 操作 需求 。 


使 用 说 明 


e 在 页 面 中 创建 <table> 标签 ， 例 子 如 下 : 


<table id="customTable" class="table kungeekui-datagrid" 
kg-data-source="qzkhxxPageData.do" 
kg-data-option="hasOrder:false;hasCheckBox:true;paging:true; 
fieldDrag:true;defaultPage:1"> 
<thead> 
<tr> 
<th kg-data-option="field:qzkhMc;width:250px"> 潜 


在 客户 名 称 </th> 
<th kg-data-field="1xr" kg-data-width="65"> 联 系 人 
</th> 
<th kg-data-field="mphone"> 联 系 人 电话 </th> 
<th kg-data-field="sjlx"> 保 护 状态 </th> 
<th kg-data-field="yssjLy"> 数 据 来源 </th> 
< > 
</thead> 
</table> 


e@ 相关 说 明 : 

e@ 指定 table 元 素 的 class 包含 kungeekui-datagrid ，table 元 素 将 自动 初始 
化 ; 

@ 通过 标签 属性 为 表格 设置 初始 配置 ; 

@ 初始 化 后 要 操作 整个 表格 请 选择 table 的 父 级 .tablecontainer 元 素 ; 

e。 分 页 数据 异步 接口 需要 返回 PageResult 分 页 信息 ，PageResult 结 构 : 


使 用 


{ 
"pagedResult": { 


"data": [// 数 据 集合 
{ 
"fieldName":"fieldVal" 
} 
]， 
"total":; 0,// 总 数据 条 数 
人 
me 
oN | Ee 
页 


"index": 9， 
"pageIndex": 1,// 当 前 第 几 页 


"pageSize": 10,// 每 页 显示 多 少 行 
"Last": 0,// 最 后 一 页 是 第 几 页 


日 和 


SE /ol 


通过 设置 kg-data-option 或 者 kg-data-[param] 为 表格 或 列 设置 属性 。 


kg-data-option="hasOrder:false;hasCheckBox:true;paging:true;fiel 
dDrag:true;defaultPage:1" 


or 


kg-data-width="25%" 


e kg-data-[param] 可 以 写 在 kg-data-option 里 面 ， 因 此 可 以 不 用 设置 


kg-data- [param] 
e@ 一 旦 设置 了 kg-data-[param] ， 那 么 kg-data-[param] 的 值 将 会 取代 
kg-data-option 中 对 应 的 属性 值 


属性 表 


table 表格 属性 : 


属性 名 类 型 默认 值 说明 


width String '100%' ”表格 宽度 

height String 'auto' 表格 高 度 

minTrNums Number 10 表格 最 小 行 数 

title String null 表格 标题 (未 完善 ) 
source String null 表格 数据 源 地 址 
autoLoadSoure Boolean true 是 否 自 动 第 一 次 加 载 数据 源 
defaultPage Number 1 初始 化 时 加 载 第 几 页 
paging Boolean false 是 否 要 分 页 

hasOrder Boolean true 是 否 需 要 排序 列 
hasCheckBox Boolean false 是 否 需 要 行 Checkbox 
onlyCheckOne Boolean false 是 否 单 选 

fixedThead Boolean true 是 否 固定 表 头 

extraClass String table' 表格 额外 的 class 属 性 
trAnimation String null tr 泻 染 动画 名 〈animate.css ) 
editField Boolean true 是 否 可 以 显示 /隐藏 列 
fixedOrderField Boolean true 是 否 左边 固定 排序 列 
fixedCheckBoxField Boolean true 是 否 左 边 固 定 chengbox 列 
fieldDrag Boolean true 是 否 允 许 列 宽 度 拖 动 
fieldOrder Boolean true 是 否 需 要 列 排序 
minFieldWidth Number 70 最 小 列 宽 

codeUrl String 某 url 码 表 地 址 


th 列 属性 : 


属性 名 
width 
field 
align 
newline 
canSelect 


fixed 


orderName 


rule 


code 


Boolean 
Boolean 


Boolean/String 


String 


String 


String 


默认 值 
"initial 


'center 
false 
true 


false 


null 


备注 

列 宽度 

列 属 性 名 
列 对 齐 方式 

内 容 是 否 换 行 
文本 是 否 可 以 被 选择 
是 否 固 定 列 


true/'left' 为 左边 固定 ，'right' 为 右边 
固定 


排序 的 名 字 


如 果 有 值 代表 这 个 列 可 以 排序 ， 并 
且 每 次 请 求 会 将 此 名 传 到 后 台 


本 列 输出 的 值 采 用 的 变换 规则 


变换 前 的 值 -> 变换 前 的 值 [rule] 
() 


码 表 参数 


用 于 码 表 接口 提供 参数 ， 返 回 值 映 
射 到 最 后 的 输出 值 


使 用 
通过 jquery 选择 器 选择 Dategrid 实例 标签 进行 方法 调用 : 


$('#table').getSelected(); 


方法 表 


方法 名 说 明 
getSelected 获取 当前 选择 项 目 
cancelSelected 取消 所 有 选择 
addField 添加 列 
modifyField 修改 列 显示 
showField 显示 列 
hideField 隐藏 列 
addBottomTr 添加 表格 底部 行 
gotoPage 跳 转 到 第 几 页 
getPage 获取 当前 是 第 几 页 
getPageSize 获取 当前 每 页 显示 多 少 条 
getAllData 获取 所 有 数据 
getSource 获取 当前 数据 源 
getTotalData 获取 总 共 多 少 条 数据 
reloadUrl 重新 加 载 数据 源 
putData 把 数据 输入 表格 
loadData 异步 加 载 数据 把 数据 输入 表格 
refresh 刷新 表格 
updateTableWidth 更 新 表格 宽度 
mask 显示 或 隐藏 表格 庶 单 
getSelected 


获取 当前 选择 项 目 。 


var a = $('#table').getSelected(); 


cancelSelected 


取消 所 有 选择 。 


咏 
a 


方法 
$('#table').cancelSelected(); 


addField 


添加 列 。 


$('#table' ).addField(' 操 作 ',，function(trData) { 
if (trData.param == "编辑 ") { 
return "<button type="button">" 编 辑 按钮 "</button>' 
} 
return '<button type="button">" 不 是 编辑 按钮 "</button>' 
}); 
// 第 一 个 参数 代表 添加 的 列 对 应 的 字段 名 
// 第 二 个 函数 参数 返回 内 容 将 显示 到 表格 中 
// 第 二 个 函数 中 trData 代 表 每 条 数据 


$('#table' ).addField({title: ' 操 作 ',width:200}, function(trData) { 
if (trData.param == "编辑 ") { 
return "<button type="button">" 编 辑 按钮 "</button>' 
} 
return '<button type="button">" 不 是 编辑 按钮 "</button>' 


}); 
// 可 以 指定 添加 列 的 宽度 


$('#table' ).addField({title:' 操 作 ',width:200}, function(trData) { 
if (trData.fieldName == "编辑 ") { 
return '<button type="button">" 编 辑 按 钮 "</button>' 
} 
return '<button type="button">" 不 是 编辑 按钮 "</button>' 
},3); 
// 最 后 一 个 参数 将 代表 添加 的 列 的 位 置 在 表格 的 第 三 列 


modifyField 


操作 列 显示 值 。 
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$('#table').modifyField('fieldName', function(trData) { 
return trData.fieldName + ' 修 改 ' 


}); 
// 第 一 个 参 类 


代表 修改 的 列 对 应 的 字段 和 
// 第 二 个 函数 参 


数 返回 内 容 将 显示 到 表格 中 
$('#table').modifyField([{ 
field: 'fieldName1', 


ruleFn:function(trData)t{ 
return trData.fieldName1 + ' 修 改 ' 


},4 
field: 'fieldName2 ' ， 


ruleFn:function(trData)t{ 
return trData.fieldName2 + ' 修 改 ' 


}]) 


7 Ve ND A 


showField 


$('#table').showField('fieldName' ) ， 


hideField 


隐藏 列 。 


$('#table').hideField('fieldName' ) ， 


addBottomTr 


添加 表格 底部 行 。 


$('#table').addBottomTr(function (tableData) 1{ 
return '<td></td>"'; 


}) 


gotoPage 


跳 转 到 第 几 页 。 


$('#table').gotopage(2); 


reloadUrl 


重新 加 载 数 据 源 ， 即 重新 加 载 表 格 的 Source。 


$('#table').reloadUrl('callAndSsmsCenter.do?callAndSsmsData&gsId=2' 
); 


$('#table').reloadUrl('callAndSsmsCenter.do?callAndSsmsData&gsI1Id=2'" 


;true); 
// 第 二 个 参数 为 true 将 返回 当前 页 的 数据 ， 否 则 是 第 一 页 的 数据 


天 一 =s=s==s 人 ss 到 :加 


putData 


将 数据 输入 表格 显示 ， 前 提 是 表格 没有 source 配 置 。 


var data = [{ 
下 全 :| 本 
fieldName:fieldVal 
},4 
于 中- 2 
fieldName:fieldVal 


}] 
$('#table').putData(data); 


loadData 


异步 获取 数据 后 ， 将 数据 输入 表格 显示 ， 相 当 异 步 获 取 数 据 后 执行 putData。 前 提 
是 表格 没有 source 配 置 。 


$('#table').loadData('callAndSsmsCenter .do?callAndSsmsData&gsId=2'" 


) 5 


mask 
显示 表格 诞 畦 ， 和 loading 不 同 的 是 没有 loading 图 标 。 
$('#table').mask('show');// 显 示 表 格 庶 单 


$('#table' ).mask('hide');// 隐 藏 表格 让 单 


事件 


使 用 
通过 jquery 选 择 器 选择 Dategrid 实例 标签 进行 事件 调用 : 


$('#table').on('rendered',function(e,data)t{ 
//do something 


J yp 


事件 表 


事件 名 执行 时 间 例子 

rendered 表格 泻 业 完成 后 查看 

loaded 表格 异步 请 求 数据 完成 后 查看 
rendered 


$('#table1').on('rendered',function(e, data)t 
console.10g(' 表 格 演 染 完成 ', data) 
}); 


loaded 


$('#table1').on('loaded',function(e,data)t 
console.10g(' 表 格 请 求 数据 完成 ', data) 
}); 


事件 


ShowDialog 模 态 框 插件 


ShowDialog 模 态 框 插 件 创建 页 面 模 态 框 ， 可 以 通过 选 


模 态 框 ， 或 者 通过 指定 地 址 创建 frame 模 态 框 。 


ShowDialog 模 态 框 插件 提供 丰富 的 配置 和 方法 。 


使 用 说 明 


e。 通过 new ShowDialog 创 建 showDialog 对 象 : 


Var ShowDialog = new ShowDialog({ 


title: ' 标 题 "， 
content: '#modal' 
}) 


e@ 相关 说 明 : 

e 一 个 页 面 只 能 同时 显示 一 个 ShowDialog 模 态 框 ， 也 就 是 新 的 模 态 框 显示 后 ， 其 
他 所 有 模 态 框 将 自动 隐藏 ; 

e 为 了 节省 资源 ， 多 个 showDialog 对 象 公用 一 个 公共 的 modal 元 素 ， 所 有 
showDialog 对 象 的 content 元 素 都 将 存在 一 个 全 局 的 modal 中 。 


创建 showDialog 对 象 时 传 入 相应 配置 。 


showDialog = new ShowDialog({ 


title: ' 标 题 '， 
width: 500, 
content: '#resetPwd' 
}); 
属性 表 
table 表格 属性 : 
属性 名 类 型 默认 值 说 明 
width String,Number © '90%' 模 态 框 宽度 
height String,Number  " 模 态 框 高 度 
title String " 模 态 框 标题 
content String 模 态 框 内 容 详情 
islframe Boolean false 是 否 Iframe 模 态 框 详情 
slidelnRight Boolean false 是 否 从 右边 滑 出 
buttons Array [{ 取 消 按钮 站 模 态 框 底 部 按钮 详情 
extraStyle Object 人 1 额外 css 样 式 
hasDefaultBtn Boolean true 是 否 有 默认 取消 按钮 
animated String fadelnDown' ” 模 态 框 弹 出 动画 
animatedOut String fadeOutUp' 模 态 框 关闭 动画 


content 属性 介绍 
。 选择 器 写法 : 在 第 一 次 show 事 件 执行 时 ， 会 把 $('#el') 元 素 移动 到 模 态 框 里 。 


注意 元 素 移 动 时 会 有 短暂 的 时 间 会 选择 不 到 ， 第 一 次 时 应 该 是 对 元 素 的 操作 完成 之 
后 再 调用 show 。 


showDialog = new ShowDialog({ 
content: '#el' 


je 


。 字符 串 写 法 : 会 在 模 态 框 里 创建 文本 元 素 。 


showDialog = new ShowDialog({ 


-| 


content: ' 一 些 字符 


}); 


e@ Url 写法 : 如 果 islframe 为 true， 那 么 content 属 性 则 为 iframe 的 url， 也 可 以 在 
reloadUrl 方 法 里 指定 url 。 


showDialog = new ShowDialog({ 
content: Url:' 


}); 


islframe 属性 介绍 : 


showDialog = new ShowDialog({ 
isIframe: true 


je) 


指定 jslframe 为 true， 会 创建 一 个 iframe 元 素 到 模 态 框 里 : 


<iframe id="{showDialogId}" name="modalFrame" src="" frameborder= 
"0O" width="100%" height="100%"></iframe> 


加 加 有 | 








已 自动 设置 iframe 的 样式 、 加 载 、 尺 寸 、 加 载 动 画 。 
buttons 属性 介绍 : 


showDialog = new ShowDialog({ 
buttons: [{ 
text: ' 保 存 '， 
event: function() { 


// 
6 才 


}, 
btnstyle: 'btn-success'}] 


jr ye 


buttons 是 指定 模 态 框 底部 的 按钮 组 。 如 果 hasDefaultBtn 为 false， 则 没有 上 默认 的 取 
消 按 钮 : 


var button = { 
text: ' 取 消 '， 
event: function () { 
kungeekui.$modalDom.modal( 'hide'); 


}, 
btnSstyle: 'btn-default' 


如 果 hasDefaultBtn 为 true, 则 会 在 指定 的 buttons 上 堆 加 取消 按钮 。 


button 对 象 属 性 : 
属性 名 类 型 默认 值 备注 
text String " 按钮 文字 
event Function null 按钮 事件 


btnStyle String 'btn-default' 按钮 样式 


使 用 
showDialog 对 象 调用 方法 : 


Var ShowDialog = new ShowDialog({ 
title: ' 标 题 '， 
content: '#modal' 
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showDialog. show( ); 


方法 表 


方法 名 参数 返回 类 型 
Show null null 
hide null null 


addArgument (key,val) null 


getArgument (key) (val) 

setTitle (title) null 

reloadUnl (url) null 
show 


弹出 模 态 框 。 


showDialog. show( ); 


备注 

弹出 模 态 框 
隐藏 模 态 框 

为 模 态 框 设置 变量 
获取 模 态 框 变 量 值 
设置 模 态 框 标题 


重 载 |frame 模 态 框 


使 用 方法 
查看 
查看 
查看 
查看 
查看 
查看 


hide 
隐藏 模 态 框 。 


showDialog.hide(); 


addArgument 
为 模 态 框 设 置 变量 ， 相 同 变量 值 会 覆盖 ， 


ShowDialog,.addArgument( ' Id ，2)， 


getArgument 


获取 模 态 框 变量 值 。 


showDialog.getArgument('id'); 


setTitle 


设置 模 态 框 标题 。 


showDialog.setTitle(' 客 户 信 息 ')， 


reloadUrl 


showDialog.reloadUrl('url'); 


事件 


使 用 


showDialog 对 象 调用 on 方法 : 


showDialog.on('show',function(){ 


// 执 行 一 些 方法 


J 


事件 表 


事件 名 
show 
shown 
hide 
hidden 


执行 时 间 

模 态 框 显 示 前 
模 态 框 显示 后 
模 态 框 隐藏 前 
模 态 框 隐藏 后 


DateSelect 日 期 选择 插件 


DateSelect 是 一 个 功能 丰富 的 日 期 框 选择 播 件 ， 支 持 单独 或 同时 选择 年 度 、 季 度 、 
月 度 、 上 日、 时、 分， 并 且 有 日 期 格式 设置 ， 限 制 日 期 期 限 等 功能 。 


使 用 说 明 


e dateSelect 基 于 momentjs 
e。 在 页 面 中 创建 文本 <input> 标签 并 指定 class 包 含 kg-dateSelect 
签 将 自动 泻 染 为 dateSelect 插 件 ， 例 子 如 下 : 


<input type="text" name="date" class=" kg-dateSelect" 
kg-select-type="D" 


kg-select-format="YYYY-MM-DD" 
kg-select-formatsimple="false"> 


。 或 者 手动 初始 化 : 


<input type="text" name="date" id="kg-dateSelect"> 


$('#kg-dateSelect').dateSelect({option}); 


，input 标 


通过 设置 kg-data-[param] 为 表格 或 列 设置 属性 : 


kg-select-type="D" 


邮 


者 通过 初始 化 传 入 配置 为 表格 设置 属性 : 


$('#kg-dateSelect').dateSelect({selectType:'D'}); 


属性 表 


dateSelect 表格 属性 : 
属性 名 类 型 
selectType String 
format String 
gap String 
formatSimple Boolean 
readonly Boolean 
clearBtn Boolean 
minDate String 


maxDate String 


默认 值 
'YSMD' 
'YYYY-MM-DD' 
至 ， 
true 
true 


true 


是 否 显 
是 否 允 代 
Se 
最 小 日 期 

最 大 日 期 


使 用 


通过 jquery 选 择 


选择 DateSelect 实 例 标 签 进行 方法 调用 : 


$( '#dateInput ' ) .getDate() 


方法 表 


方法 名 
getDate 
clearDate 
setMinDate 


setMaxDate 


参数 返回 备注 

null Object 获取 选择 日 期 信息 
null jQ 元 素 清空 日 期 

String jQ 元 素 设置 最 小 日 期 
String jQ 元 素 设置 最 大 日 期 


$( '#dateInput ' ) .getDate() 


LIEGiE 


YM 
// 
Nb 
// 
YY 


setMinDate 


Val:'2018 年 ' ,//input 的 value 
StartDate : 
endDate:'2018-12-31',// 具 体 到 天 的 结束 


type:'Y'// 选 择 类 型 


'2018-01-01',// 具 体 到 天 EE 


使 用 方法 
查看 


其 


设置 最 小 日 期 。 


$('#dateInput').setMaxDate('2018-01-01'); 


setMaxDate 


设置 最 大 日 期 。 


$('#dateInput').setMaxDate('2018-12-01'); 


事件 


使 用 
通过 jquery 选 择 器 选择 DateSelect 实 例 标签 进行 事件 调用 : 


$('#dateInput').on('change',function(e,data)t{ 
//do something 
}); 


事件 表 


事件 名 执行 时 间 例子 

change 改变 日 期 选择 后 查看 

blur 失去 焦点 后 查看 
change 


$('#dateInput').on('change',function(e,dateVval)t 
console.1log(' 改 变 日 期 选择 后 ', dateVal) 
}); 


blur 


$('#dateInput').on('blur',function(e,dateVval)t 
console.1log(' 失 去 焦点 后 ', dateVal) 


J 


事件 
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SelectTree 日 期 选择 插件 


SelectTree 是 一 个 功能 丰富 的 下 拉 树 插件 ， 支 持 多 种 功能 ， 基 于 ztree 。 


使 用 说 明 


e@ selectTree 基 于 ztree 
e。 在 页 面 中 创建 文本 <input> 标签 : 


<input type="text" name="date" id="kg-selectTree"> 


然后 通过 方法 驱动 : 


$('#kg-selectTree').selectTree({optionObject}); 


属性 


或 者 通过 初始 化 传 入 配置 为 表格 设置 属性 : 


$('#kg-selectTree').selectTree({zNodes:[]}); 


属性 表 


selectTree 表格 属性 : 


属性 名 类 型 默认 值 说 明 

zNodes Array 0 节点 数据 

setting Object 个 ztree 的 setting 
defaultSelectedNodes Array [] 默认 选择 的 节点 数据 
showTopDrop Boolean false 是 否 显 示 第 用 选项 
defaultTopNodes Array [] 常用 选项 节点 数据 


选 杞 
topDropLabel String ' 全 部 选项 ' 显示 文本 


使 用 


通过 jquery 选择 器 选择 DateSelect 实 例 标签 进 


A 


$('#selectTree' ).getTreeobj(); 


方法 衣 


方法 名 

getTreeObj 
setSelectTreeNodes 
setSelectedTreeNodes 


getSelectTreeNodes 
getSelectTreeData 


clearSelectTree 


selectTreeNodeByDataParam 


数 


Null 


Array 


Array 


Null 
Null 
Null 
(val, 


param, 
nodes) 


方法 调用 : 


备注 


获取 ztree 对 象 
设置 Nodes 数 据 


设置 选择 的 
Nodes 数 据 
获取 选择 的 
Nodes 数 据 
获取 选择 的 数据 


> 主 


肖 空 设 置 的 
Nodes 


通过 Node 节 点 
data 对 象 中 属性 
设置 默认 值 


事件 


使 用 


己 


通过 jquery 选 择 器 选择 selectTree 实 例 标 签 进 行事 件 调用 : 


$('#selectTree').on('change',function(){ 


//do something 
}); 


事件 表 


事件 名 执行 时 间 

change 改变 选择 后 ( 单 选 模式 ) 

check 改变 选择 后 (多 选 模式 ) 
change 


查看 


$('#selectTree').on('change',function(e,dateVval,ztreeId)t 


console .log(' 改 变 选择 后 ', dateVal,ztreeId) 


jy 


check 


$('#selectiree').on('check',function(e,dateVal,ztreeId){ 


console.1log(' 改 变 选择 后 ', dateVal ， ztreeId) 


J 


事件 
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FormValid 表单 验证 插件 


FormValid 是 一 个 精巧 的 课 配 置 表单 验证 插件 。 


使 用 说 明 


@ 为 页 面 中 的 form 标 签 指定 属性 : 


<form id="qzkhForm" class="form-horizontal crm-form" kg-form 
-Valid="true"> 


或 者 


new kgValidForm(formElement); 


或 者 


$('#form' ).kgVvalidForm( ); 


e。 然后 通过 标签 属性 为 表单 元 素 指 定 验证 条 件 : 


<input type="text" class="form-control input-sm" id="eMail" 


A 


name="eMail" placeholder=" 请 输入 电子 邮箱 " kg-data-valid="email"> 


Eee 网, 


添加 验证 条 件 后 会 根据 表单 元 素 的 事件 响应 实时 监控 表单 元 素 值 的 合法 性 ， 给 
与 用 于 提示 。 
。 调用 form 标 签 元 素 方法 验证 : 


$( '#qzkhForm' ) .kgValidParam( ) ;// 验 证 通过 返回 true ; 失败 返回 false 


属性 


验证 条 件 


@ 通过 标签 属性 为 表单 元 素 指 定 验证 条 件 : 


<input type="text" kg-data-valid="email"> 


验证 条 件 表 : 
验证 条 件 说 明 验证 条 件 
不 能 为 空 notNull 
纯 数字 numeric 
正 整数 positive 
整数 integer 
浮 点 数 decimal 
正 浮 点 数 isdecimal 
Email 地 址 验证 email 
J ， 用 户 信息 - Email 地 址 验证 (保持 与 人 
纯 字 母 alpha 
字母 和 数字 alphaNumeric 
字母 数字 字符 、 下 划 线 和 破 折 号 alphaDash 
必须 是 正 整数 natural 
必须 是 非 零 的 整数 naturalNoZero 
必须 包含 一 个 有 效 的 IP ip 
TT ，-， 空 白字 符 、 空 格 、 制 表 符 和 换 ee 
必须 包含 一 个 有 效 的 网 址 Url 
必须 包含 日 期 格式 YYYY-MM-DD te 
必须 是 中 文字 符 chineseCharacter 


必须 是 有 效 手机 号 码 或 者 固 话 号 码 
必须 是 有 效 手 机 号 码 

必须 是 有 效 国 话 号 码 

必须 是 有 效 QQ 号 码 

必须 是 有 效 的 邮政 编码 
必须 是 有 效 身 份 证 号 码 

不 能 包含 特殊 字符 
必须 是 有 效 微 信号 

必须 是 中 文字 符 或 者 美文 字符 
必须 是 中 美 字符 或 者 中 文 符号 
必须 是 正 数 或 两 位 正 浮 点 数 
必须 是 非 零 正 数 或 两 位 正 浮 点 数 
必须 是 http 或 者 https 开 头 的 网 址 
crm - 客户 名 称 匹 配 规则 

crm - 企业 联系 人 匹配 规则 


文本 提示 表 : 


mobileOrTelephone 
mobilePhone 
telephone 

qq 

postcode 

idCard 
SpecialCharacter 
weixin 
chineseAlpha 
chineseSign 
money 
moneyNoZero 
webUrl 


crmCustomName 


crmCompanyContactsName 


验证 条 件 
notNull 
specialCharacter 
mobileOrTelephone 
mobilePhone 
email 

telephone 
chineseAlpha 
alphaNumeric 
Url 
chineseCharacter 
positive 


numeric 
crmCustomName 


crmCompanyContactsName 


文本 提示 
输入 值 不 能 为 空 ! 

特殊 符号 只 能 包含 小 括号 ! 
请 输入 正确 的 电话 号 码 ! 
请 输入 正确 的 手机 号 码 ! 

请 输入 正确 的 邮箱 地 址 | 

请 输入 正确 的 固 话 号 码 ! 

请 输入 中 文字 符 或 者 美文 字符 ! 
请 输入 英文 字母 或 数字 | 

请 输入 一 个 有 效 的 网 址 ! 
必须 是 中 文字 符 ! 

请 输入 大 于 0 的 正 整 数 | 


请 输入 正 整 数 | 


只 能 包含 中 文 /英文 、 中 英文 小 括号 、 阿 拉 伯 数 


字 ! 
只 能 包含 中 文 /英文 、 小 圆 点 ! 


、 


使 用 


ke 


通过 jquery 选择 器 选择 FormValid 实 例 标 签 进行 方法 调用 : 


$('#form' ).addNodeValid( ); 


方法 表 
方法 名 
addNodeValid 
removeNodeValid 
setDefultValidValue 
clearDefultValidValue 


clearValidHints 


kgValidParam 


数 


(target, 
defaultValue) 


(target) 


(defaultValue) 


(nodes) 


备注 


动态 新 增 验 证 节点 


清除 节点 验证 绑 定 ( 即 该 节点 
不 再 有 验证 行为 ) 


设置 不 进行 接口 验证 的 值 


清除 不 进行 接口 验证 的 值 


重 置 验证 插件 ， 清 空 错误 验证 


验证 form 表 单 所 有 输入 框 


方法 
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CRM 和 平台 公用 方法 


CRM 平 台 前 端 内 置 多 个 公用 方法 ， 便 于 高 速 开发 ， 这 些 方法 一 般 放 在 crm.portal.js 
里 。 


人 共 方 法 


initCodeSelectPicker() 


根据 码 表 更 新 下 拉 框 的 数据 基于 selectPicker 。 使 用 方法 : 


<select id="htlx" name="htlx" class='"form-control selectpicker" 
kg-data-code="crm_ htlx"> 

<option value="">-- 请 选择 --</option> 
</select> 


源码 : 


if ($('table.kungeekui-datagrid').length < 1 && ('select.selectp 
icker').length > 0) {// 自 动 执行 
initCodeSelectPicker(); 
} 
function initCodeSelectPicker() { 
$('select.selectpicker').each(function () { 
var code = $(this).attr('kg-data-code'); 


if (!code) { 
eurnl 

} 

If (top.codeMapperData[code]) { 
initSelect($('.selectpicker[kg-data-code="' + code + 

'"]'), top.codeMapperData[lcode]); 

return 

} 


Ifunction (code) { 
$.ajax(({ 


type: 'get', 


url: "/portal/crm/infra/ftspcode.do?query&code=" 
+ Code, 


success: function (res) { 
If (res && res[0]) { 
top.codeMapperData[code] = res[0]; 


initSelect($('.selectpicker[kg-data-code 
="' + code + '"]'), top.codeMapperDatal[code|); 


} 


}); 
}(code) 


function initSelect(el, data) { 


if (el.get(0).hasInitedSelect) { 
return 


} else { 


el.get(0).hasInitedSelect = true; 
} 
for (i in data) { 


Var $option = $('<option Value="”' +I + '">' +d 
ata[i] + '</option>"'); 


el.append($option); 
} 


el.selectpicker('refresh'); 


redirectTab(name,url) 
首页 一 级 菜单 的 跳 转 。 使 用 方法 : 
redirectTab(' 加 盟 商 合同 审核 ' )， 


redirectTab(' 加 盟 商 合同 审核 '，'/portal/htContract.do?htSpPage');// 
Url 优先 级 大 于 name 


源码 : 


window.redirectTab = function (name, url) { 
If (Iname) { 


return; 

} 

if (!Iwindow.top.$) { 
return 

} 


var $$ = window.top.$; 
$$('.submenu-label').each(function () { 
If ($(this).text() == name) { 
var 1i = $(this).parent('a').parent('1i'),; 
$$('.openable').removeClass('open'); 
$$('.openable .submenu').hide(); 
$$('.openable .submenu').find('1i').removeClass('act 


ive' ) ， 
If (!$$('.sidebar-menu').hasclass('sidebar-mini')) { 
1i.parent('ul').show(); 
} 
li.parent('ul').parent('1i').addclass('open'); 
li.addClass('active'); 
TC Oe a 
1i.trigger('click"'); 
} 
return 
} 
}) 
Tw 
window.location.href = Url 
} 
} 


refreshPage(onlyTable) 


刷新 页 面 。 


refreshPage() ;// 刷 新 整个 页 面 
refreshPage(true);// 只 刷新 页 面 中 的 数据 表格 


tableQuery(form, table) 


数据 表格 对 应 表单 的 查询 。 


tableQuery('#form'，'#table' );// 根 据 Id 为 form 的 表单 条 件 查 询 Id 为 table 


pp ra de 
的 数据 表格 


源码 : 


window.tableQuery = function (form, table) { 
If (!form || !table) { 
return false 


} 

if (!$(form).length || !'$(table).length) { 
return false 

} 


var url = $(table).getSource() ? $(table).getSource().setPparams 
ByUrl($(form).serializeArray().map(function (obj) { 
var $node = $(form).find('*[name=' + obj.name + '|]'); 
If ($node.hasClass('kg-selectTree')) { 
var _treeData = $node.getSelectTreeData()[0]; 
obj.value = _treeData ? _treeData.data[$node.attr( ' data 
-tree-query')] : ''; 
} 
return obj; 
py) 
$(table).reloadUrl(ur1); 


} 


initindustryDrop() 


初始 化 行业 数据 (下 拉 树 ) (用 赋值 window. default hyDm 处 理 JSP 方 式 的 默认 数 
据 ) 


function initIndustryDrop(url, params) { 
var $industry = $('input[data-type=industry]'); 
If (!$industry.1length) 


return 
$.getJSON(url || '/skin/cache/crm_hyfl1.json', params || 让, 
function (result) { 
window._industryData = [{ 
code: "! 


blade 
}].concat(result.data || [1]); 
$industry.each(function () { 
var $this = $(this); 


var _zNodes = _industryData.map(function (obj) { 
return { 
id: obj.id, 


pId: obj.pId, 
name: obj.name, 
open: false, 
data: obj 
}; 
}); 
var _defaultTopNodes = new Array(11); 
_ZNodes.forEach(function (obj) { 
var _index = [请 选择 "'， ' 批 发 业 !， "零售 业 !， ' 租 赁 业 ， 
' 商 务 服务 业 !， ' 建 筑 安装 业 !， ' 软 件 和 信息 技术 服务 业 !， ' 制 造 业 !， ' 专 业 技 术 


| 造 业 
服务 业 '，' 农 、 林 、 牧 、 渔 业 '，' 居 民 服 务 、 修 理 和 其 他 服务 业 '] .index0f (obj.n 
ame )，; 
_index >= 0 && defaultTopNodes.splice(_index, 1 
， 0bj); 
}); 
$this.addClass('kg-selectTree').selectTree({ 
zNodes: _zNodes, 
setting: { 
callback: { 
beforeClick: function (treeId, treeNode, 
clickFlag) 1{ 
$('.kg-selectTree-dropdown').hide( ); 
return true; 


}, 


defaultSelectedNodes: [_zNodes[0]], 
showTopDrop: true, 
defaultTopNodes: _defaultTopNodes 

}); 

If (window,._default_hyDm) { 
$industry.selectTreeNodeByDatapParam(window._defa 

ult_hyDm, 'code'); 
} 
}); 
}); 


reinitiframe() 


重 置 |frame 高 度 


window.reinitIframe = function () { 
var $iframe = $('iframe.crm-iframe'); 
$iframe.each(function () { 
this.height = "100%"; 
If (!this.$iframewrap) { 
this.$iframeWrap = $('<div class="crm-iframe-wrap">< 


A GV > 
$(this).wrap(this.$iframewrap); 
} 
if (!$(this).is(':visible')) { 
return 
} 


var height = $(this).contents().height(); 
$('.crm-iframe-wrap' ).height(height); 
}) 


原生 扩展 


// 字符 串 扩 展 ， 属 性 字符 串 转 对 象 规则 : 'width':'200px' -> {width:'20 


Opx'} 
String.prototype.toObject = function () { 

return JSON.parse('{' + this.replace(/\s*['"]*([^'":;\S]*)[ 
wl NS tS [eo lA NS ) [IO le NS A D2 enlace 
MEA 
}; 


// 字符 串 toBool 说 明 : "false" to false 
String.prototype.toBool = function () { 
return (/^true$/i).test(this); 


je 


// 判 断 是 否 email 
String.prototype.isEmail = function () { 
return /A\w+((-\W+)|(\.\Ww+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9 
]+)*\.[A-Za-z0-9]+$/. test(this); 
}; 
// 检 查 电 话 号 码 
String.prototype.isPhoneCall = function () { 
returnmne (Nnpsl4lsl7 le Nons) (AONd2 3 ?Nd{7731$) 7/ test(tEh 
is); 


J 


//HTML 字 符 串 转 义 
String.prototype.toHtmlCode = function () { 
var _temp = document.createElement('div'); 
_temp.innerHTML = this.replace(/((?:&))\s+((?:#))/g, '$1$2') 


return _temp. innerText; 


je 


// 转 换 百分比 
String.prototype.toLevel = function () { 
var temp = /[0-9]+(\.[0-9]+){0,1}/.exec(this); 
if (!temp) 
neteurnmne., 
var _str = Number(temp[0]).toSstring(); 
var _index = _str.indexof("'."); 
var _chart = []; 


for (var 1 = 0; i < _str.length; I++) { 
(SlaN = 
continue; 
_Cchart.push(_str[i]); 
} 
_index += 2; 
if (_index < 2 || (_index - _chart.length > 1)) 
return _chart.concat(['0', '0']).join('').replace(/^[0]+ 
/g, "'); 
if (_chart.length < _index) 
return _chart.concat(['0']).join('').replace(/^[0]+/g, "" 


); 
If (_chart.length > _index) 
_Cchart.splice(_index, 0, '.'); 
return _chart.join('').replace(/^[0]+/g, ''); 
}; 


// 获 取 链 接 字 符 囊 中 参数 
String.prototype.getParamByUr] = function (name) { 

var _name = new RegExp(name + '=([^&]{0,})').exec(decodeURI( 
len )) 

return (_name && name.length) ? name[1] : null; 


je 


// 生 成 链接 参数 对 象 
String,.prototype,.setParamByUrl = function (name, value) { 
var _paramStr = /[^]*\?([^?]+)$/.exec(decodeURI(this)); 
var _this = this; 
If (!_paramStr && _this.indexof('?') < 0) { 
niS 二 (三国 20 
} 
var _param = name + '="' + Value; 
If (this.getParamByUrl(name) == Null1) { 
return _this.concat(((_paramSstr && _paramstr.length) ? " 
&' : '') + _param); 
} 
return _this.replace(new RegExp(name + '=([^&]{0,})'), _para 
m); 


J 


String.prototype.setParamsByUrl1 = function (array) { 
if (array || array,.push ) 
return this; 
var _this = this; 
array.forEach(function (obj) { 
_this = _this.setPparamByUrl(obj.name, obj.value); 
}); 


return _this; 


jee 


// 将 数字 格式 的 字符 串 转 换 为 时 间 格 式 的 字符 串 
String.prototype.toDateFormat = function (format) { 
return /^\d{4,8}$/.test(this) ? this.replace(/\B(?=\d{2}$)/, 
format || '-').replace(/(^\d{4})\B(?=\d)/, '$1'.concat(format | 
| '-')) : this.toSstring(); 
}; 


// 转 换 数 字 字 符 串 位 数 ， 默 认 2 位 ， 小 于 则 补 9， 大 于 则 截取 
String.prototype.toFixDigit = function (number, last) { 
number = typeof number === 'Number' && number > 0 ? number : 
2; 
var _this = this.toString(); 
If (!/^[\d]+$/.test(_this) || new RegExp('^[\\d][' + number 
+ ']$').test(_this)) 
return _this.toString(); 
if (_this.length > number) 
return !last ? _this.substring(_this.length - number, _t 
his.length) : _this.substring(0, number); 
while (number - _this.length > 0) { 
_this = !last ? '0'.concat(_this) : _this.concat('0'); 
} 


return _this; 


}; 


// 人 金额 字符 串 处 理 
String.prototype.toMoney = function () { 
var _regx = /[-]{0,1}[0-9]+(\.[0-9]+){0,1}/.exec(this); 
if (!_regx) 
return '0.00'， 
var _temp = _regx[0].split("'.'); 


_temp[0] = _temp[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); 


—temp[1] = _temp[1] || '00',; 


_temp[1]. length < 2 && (_temp[1] += '0'); 


return _temp.join('.'); 
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Number .prototype.toMoney = function () { 
return this.toSstring().toMoney() 





} 
了 um 
jQuery 扩展 
crm_clearForm 
清空 表单 数据 
$('#form').crm clearForm( ); 
setLoader 
显示 /隐藏 原生 加 载 遮 音 
$$('#div').setLoader(true);// 显 示 加 载 遮 章 
$('#div').setLoader(false);// 隐 藏 如 载 遮 音 
源码 : 
$.extend(true, $.fn, { 
setLoader: function (status) {// 显 示 加 载 蒙 层 
return this.each(function () { 
LEI a 
if ($(this).css('position') != 'absolute' || $(t 
his).css('position') != 'relative' || $(this).css('position') != 


fixed Df 


$(this).css('position', 'relative'); 


其 他 1 : CRM 公 用 方法 


} catch (e) { 
} 
if (!this.$loader) { 
this.$loader = $('<div class="kg-loader"><div cl 
ass="kg-loader-icon"><i class="fa fa-spinner fa-spin fa-3x fa-fw 
" style="color:#0dbbe5"></i></div></div>' )，; 
If ($(this).is('body')) £ 
this.$loader.css('position', 'fixed'); 
} 
$(this).append(this.$loader); 
} 
if (status) { 
this.$loader .fadeIn(); 
} else { 
this.$loader .fadeOut(); 


}) 
}, 
crm_clearForm: function () {// 清 空 元 素 内 表单 元 素 值 
return this.each(function () { 
$(this).clearValidHints(); 
$(this).find('input').not('input[disabled],input[rea 
donly]').val(''); 
$(this).find('input[type="checkbox"]').not("'input[di 
sabled],input[readonly]').prop('checked', false); 
$(this).find('input[type="radio"]').not('input[disab 
led],input[readonly]').prop('checked', false); 
$(this).find('input.kg-dateSselect').val(''); 
$(this).find('textarea').not('textarea[disabled], tex 
tarea[readonly]').val(''); 
$(this).find('select').not('select[disabled],select[ 
readonly]').val(''); 
$(this).find('select.selectpicker').selectpicker('re 
fresh ' ) ， 


56 


其 他 1 : CRM 公 用 方法 
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CRM 和 平台 默认 方法 


CRM 平 台 前 端 内 置 多 个 默认 处 理 程序 ， 便 于 高 速 开发 ， 这 些 方法 一 般 放 在 
crm.portal.js 里 。 


统一 异步 请 求 前 处 理 


在 这 里 统一 处 理 网 站 的 异步 请 求 。 


window，token = ($("meta[name='_ csrf ']"”). Length ? $("meta[fname=" 
_csrf']") : $(top.document).find("meta[name="'_csrf']")).attr("co 
neemte ys 
window._header = ($("metafname='_csrf_header']").length ? $( 
"meta[name="'_csrf_header']") : $(top.document).find("meta[name=" 
_csrf_header']")).attr("content"); 
headers[_header] = _token; 
$(document ) .ajaxSend(function (e, xhr) { 
if (xhr.setRequestHeader) {// 设 置 请 求 头 
xhr.setRequestHeader(_header, _token); 
xhr.setRequestHeader('sendType', 'ajax'); 


} 
ELS 
xhr.done(function (data) {// 起 时 处 理 
try { 
data = typeof data == 'string' ? JSON.parse( 


data) : data; 
} catch (e) { 


} 

if (data.status == 'timeout') { 
top.location.href = top.location.href; 
return; 

} 


}); 
} catch (e) { 


console.1og('xhr 不 存在 或 者 Xhr 没 有 done 方 法 ' ) 


je 


表单 由 多 个 程序 处 理 ， 负 责 不 同 的 功能 


// 这 里 处 理 表单 只 有 一 个 name 时 button 触 发 的 表单 默认 事件 
$('form.crm-form').on('submit', function () { 
return false 


jp 


// 乡 定 查询 表单 的 回 车 查询 
$('form').on('keyup', function (e) { 
if (e.keyCode == 13) { 
var $query = $(this).find('*[data-type="query"]'); 
$query.length ? $query.click() : (event.currentTarget.id 
== 'myqueryForm' ? myquery() : (window.query || function () { 


})()); 


} 


// 限 制 电话 类 型 输入 框 长 度 和 内 容 
$(document).on('input', "input[name=dhQuery],input[name=mphone], 
input[name=phoneNum],input[name=dhhm],input[name=osPhone],input[ 
name=phone],input[data-type=phone]", function () { 

// 如 果 是 固定 电话 类 型 可 以 加 特殊 符号 4-“， 比 正常 电话 11 位 号 码 多 一 位 

var maxLength = /\-/g.test(this.value) ? 13 : 11; 

$(this).val((this.value.split('-').length > 2 || this.value. 
length > maxLength) ? this.value.substring(0, this.value.length 
- 1) : this.value.replace([3, 4].indexOof(this.value.indexof('-') 
DO? /ANAd: /Nd Ao 天 全 
}).on('input', 'input[data-type=money]', function () { 

// 只 能 输入 浮 点 数字 类 型 

var _val = this.value.replace(/[^.\d]+/g, ''); 

If (/(A\.+)|(([^]*[.]){2})/.test(this.value)) { 

var _regex = /\d+(\.\d*)?/.exec(this.value); 
_Val = (_regex && regex.length) ? _regex[0] : this.valu 

e.substring(0, this.value.length - 1); 

} 

$(this).val(_val); 
}); 


// 去 掉 input 框 的 空格 

$('input[type=text]').on('blur', function () { 
$(this).val($.trim($(this).val())); 

}); 


kungeekUI 插 件 触发 


$(document).ready(function () { 
// 触发 数据 表格 
$('table.kungeekui-datagrid').each(function () { 
new Datagrid({ 
target: $(this) 
}); 
}) 
// 触发 日 期 选择 框 
If (window.moment) { 
$('input.kg-dateSelect[type="text"|]').dateSelect(); 


}) 


bootstrap 组 件 触发 
在 这 里 默认 触发 bootstrap 的 组 件 功 能 。 


// 页 签 

$( '#navTabs a').click(function (e) { 
e.preventDefault() 
$(this).tab('show') 

}) 

// 显 示 更 多 

$('.crm-show-more').on('click', function () { 
$(this).toggleClass('expand' ) ， 

}) 


